
<div class="bg-[#2a2f35] p-6 rounded-lg max-h-[70svh] overflow-y-auto">
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-2xl font-bold text-white">Lists</h2>
    <button class="text-gray-400 hover:text-white cursor-pointer"
            @click="listsOpen = false">
      {% include "app/icons/x.svg" with classes="w-6 h-6" %}
    </button>
  </div>
  <ul class="space-y-3">
    {% for custom_list in custom_lists %}
      <li class="flex items-center justify-between bg-[#39404b] p-3 rounded-md gap-1">
        <span class="text-white">{{ custom_list.name }}</span>
        {% include "lists/components/list_item_button.html" with has_item=custom_list.has_item %}
      </li>
    {% empty %}
      <li class="text-gray-200">You haven't created any lists yet.</li>
    {% endfor %}
  </ul>
</div>
